<template>
  <section>
    <div class="content-title">{{title}}</div>
    <div class="link-list">
      <div class="link-type">
        <div v-for="(x, y) in types" :key="y" @click="selectlinkType(y)" :class="linkType == y ? 'active' : ''">
          {{ x }}
        </div>
      </div>
      <div style="height: 120px;">
        <div class="link-content">
          <div v-for="(x, y) in list" :key="y" @click="goToLink(x)">
            {{ x.title }}
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import system from '@/utils/system';
import { queryData } from '@/apis/mysql'
import global from '@/utils/global';
import options from '@/utils/options';
const props = defineProps({
  title: {
    type: String,
    defalut: ''
  }
})
const linkType = ref(0)
const list = ref([])
const alls = ref([])
const types = options.links
const selectlinkType = (y) => {
  linkType.value = y
  getListByType(y)
}
const goToLink = (x) => {
  system.openWeb(x.href)
}

function getListByType(type){
  list.value = alls.value.filter(x=> x.type == type + 1)
  // // console.log(list.value)
}

function getLinkList() {
  queryData({
    table: 'links',
    query: {
      page: 1,
      show: 100
    }
  }).then(res => {
    // const arr = global.arrayToTree(res.data, "pid", 0)
    // list.value = arr
    alls.value = res.data
    getListByType(0)
  })
}
onMounted(() => {
  getLinkList()
})
</script>
<style lang="scss" scoped>
.link-list {
  margin-top: 10px;

  .link-type {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 10px;

    >div {
      width: 25%;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      text-align: center;
    }

    .active {
      // background-color: #1889fa;
      // color: #fff;
      color: #1889fa;
    }
  }

  .link-content {
    display: flex;
    flex-wrap: wrap;
    // height: 200px;
    border-top: 1px solid #fff;

    >div {
      width: 25%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
    }
  }
}
</style>
